<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.js"></script>
    <style>
        .box {
            width: 600px;
            height: 400px;
            border: 1px solid #999;
            display: block;
        }
    </style>

</head>

<body>
    <div id="box1" class="box"></div>
    <br>
    <div id="box2" class="box"></div>
    <br>
    <div id="box3" class="box"></div>
    <script>
        let chartA = echarts.init(document.querySelector("#box1"));
        // chartA.setOption({
        //     xAxis: {
        //         type: 'category',
        //         data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
        //     },
        //     yAxis: {},
        //     series: [
        //         {
        //             type: 'bar',
        //             name: '2015',
        //             data: [89.3, 92.1, 94.4, 85.4]
        //         },
        //         {
        //             type: 'bar',
        //             name: '2016',
        //             data: [95.8, 89.4, 91.2, 76.9]
        //         },
        //         {
        //             type: 'bar',
        //             name: '2017',
        //             data: [97.7, 83.1, 92.5, 78.1]
        //         }
        //     ]
        // });
        chartA.setOption(option = {
            legend: {},
            tooltip: {},

            //数据集
            dataset: {
                // 提供一份数据。

                //提供一份数据，echarts的数据集以二维数组作为数据集数据类型
                // [0][0]数据对于图形生成没有任何影响
                // [0][1~]数据将作为series中的系列的数据名称进行定义，并生成lengend
                // [1~][0]数据作为axis的type取值category的类目分类
                // [1~][1~]数据将对应series中每个系列进行数据的生成和定义
                source: [
                    ['product', '2015', '2016', '2017'],
                    ['Matcha Latte', 43.3, 85.8, 93.7],
                    ['Milk Tea', 83.1, 73.4, 55.1],
                    ['Cheese Cocoa', 86.4, 65.2, 82.5],
                    ['Walnut Brownie', 72.4, 53.9, 39.1]
                ]
            },
            // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
            xAxis: { type: 'category' },
            // 声明一个 Y 轴，数值轴。
            yAxis: {},
            // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
            series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
        });

        let chartB = echarts.init(document.querySelector("#box2"));
        chartB.setOption(option = {
            legend: {},
            tooltip: {},

            //数据集
            dataset: {
                // 提供一份数据。

                //提供一份数据，echarts的数据集以二维数组作为数据集数据类型
                // [0][0]数据对于图形生成没有任何影响
                // [0][1~]数据将作为series中的系列的数据名称进行定义，并生成lengend
                // [1~][0]数据作为axis的type取值category的类目分类
                // [1~][1~]数据将对应series中每个系列进行数据的生成和定义
                source: [
                    ['', 'Matcha Latte', 'Milk Tea', 'Cheese Cocoa','Walnut Brownie'],
                    ['2015', 43.3,85.8,93.7,86.4],
                    ['2016', 83.1,73.4,55.1,23.6],
                    ['2017', 86.4,65.2,82.5,86.2],
                    ['2018', 86.4,65.2,82.5,86.2]
                  
                ]
            },
            // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
            xAxis: { type: 'category' },
            // 声明一个 Y 轴，数值轴。
            yAxis: {},
            // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
            series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' },{ type: 'bar' }]
        });

        let chartC = echarts.init(document.querySelector("#box3"));
        chartC.setOption(option = {
            legend: {},
            tooltip: {},

            //数据集
            dataset: {
                // 提供一份数据。

                //提供一份数据，echarts的数据集以二维数组作为数据集数据类型
                // [0][0]数据对于图形生成没有任何影响
                // [0][1~]数据将作为series中的系列的数据名称进行定义，并生成lengend
                // [1~][0]数据作为axis的type取值category的类目分类
                // [1~][1~]数据将对应series中每个系列进行数据的生成和定义
                source: [
                    ['product', '2015', '2016', '2017'],
                    ['Matcha Latte', 43.3, 85.8, 93.7],
                    ['Milk Tea', 83.1, 73.4, 55.1],
                    ['Cheese Cocoa', 86.4, 65.2, 82.5],
                    ['Walnut Brownie', 72.4, 53.9, 39.1]
                ]
            },
            // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
            xAxis: { type: 'category' },
            // 声明一个 Y 轴，数值轴。
            yAxis: {},
            // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。

            // seriesLayoutBy:"row"将行中的字段作为x轴的种类名称
            // seriesLayoutBy:"column"将列中的字段作为x轴的种类名称
            series: [{ type: 'bar', seriesLayoutBy:"row" }, { type: 'bar',seriesLayoutBy:"row" }, { type: 'bar',seriesLayoutBy:"row" }, { type: 'bar',seriesLayoutBy:"row" }]
        });
    </script>
</body>

</html>